import { Button, ButtonDanger, ButtonPrimary, Check, Input, Radio, Table, vars } from '../imports';
import { bar } from '../style.css';

export function TablePage() {
	let tb: Table;
	let fixColumnInput: HTMLInputElement;

	function addColumn() {
		tb.setColumns([
			{ title: '列1', key: 0, align: 'center', sortable: true, width: '200px', resizable: true },
			{ title: '列2', key: 1, sortable: true, width: '10%', resizable: true },
			{ title: '列3', key: 2, align: 'right', width: '10%', resizable: true },
			{ title: '列4', key: 3 },
			{ title: '列5', key: 3 },
			{ title: '列6', key: 3, resizable: true },
			{ title: '列7', key: 3, width: '15%', resizable: true },
		]);
	}

	function addData() {
		const result = [];
		let sum = 0;
		for (let i = 1; i <= 30; i++) {
			sum += i;
			const row = [];
			for (let j = 0; j < 4; j++) {
				row.push('一些数据' + Math.floor(Math.random() * 5));
			}
			result.push(row);
			if (i % 10 === 0) {
				result.push({ section: '合计：' + sum });
			}
		}
		console.log('data generated!');
		tb.setRows(result);
	}

	return (
		<>
			<h2>表格（分页展示列表数据或数据少于100行建议使用此控件</h2>
			<div class={bar}>
				<ButtonPrimary textContent="添加表头" onClick={addColumn} />
				<ButtonDanger
					textContent="删除表头"
					onClick={() => {
						tb.setColumns([]);
					}}
				/>
				<ButtonPrimary textContent="添加数据" onClick={addData} />
				<ButtonDanger
					textContent="删除数据"
					onClick={() => {
						tb.setRows([]);
					}}
				/>
				<span style={{ margin: '0 1rem' }}> | </span>
				<Input ref={(i) => (fixColumnInput = i)} placeholder="固定列" type="number" style={{ width: '10rem' }} />
				<Button
					textContent="设置固定列"
					onClick={() => {
						tb.setFixColumns(parseInt(fixColumnInput.value || '0'));
					}}
				/>
			</div>
			<div class={bar}>
				<span style={{ color: vars.color.accent }}>排序</span>
				<label>
					<Radio name="sort" checked={true} onClick={() => tb.setSortType('none')} /> 无
				</label>
				<label>
					<Radio name="sort" onClick={() => tb.setSortType('simple')} /> 简单
				</label>
				<label>
					<Radio name="sort" onClick={() => tb.setSortType('combine')} /> 组合
				</label>
				<span style={{ margin: '0 1rem' }}>|</span>
				<span style={{ color: vars.color.accent }}>列宽：</span>
				<label>
					<Radio name="table-size" checked onClick={() => tb.setColumnSize('auto')} /> 自适应
				</label>
				<label>
					<Radio name="table-size" onClick={() => tb.setColumnSize('scale')} /> 按比例分配
				</label>
				<label>
					<Radio name="table-size" onClick={() => tb.setColumnSize('fixed')} /> 绝对值
				</label>
				<span style={{ margin: '0 1rem' }}>|</span>
				<label>
					<Check
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									tb.el.style.height = '300px';
								} else {
									tb.el.style.height = '';
								}
							});
						}}
					/>
					表格固定高度
				</label>
				<span style={{ margin: '0 1rem' }}>|</span>
				<label>
					<Check
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									tb.setColumnBorder(true);
								} else {
									tb.setColumnBorder(false);
								}
							});
						}}
					/>
					始终显示列边框
				</label>
				<span style={{ margin: '0 1rem' }}>|</span>
				<label>
					<Check
						checked={true}
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									tb.setHeadLine(true);
								} else {
									tb.setHeadLine(false);
								}
							});
						}}
					/>
					显示表头
				</label>
				<span style={{ margin: '0 1rem' }}>|</span>
				<label>
					<Check
						checked={false}
						text="复选框"
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									tb.setSelectable(true);
								} else {
									tb.setSelectable(false);
								}
							});
						}}
					/>
					复选框
				</label>
				<span style={{ margin: '0 1rem' }}>|</span>
				<label>
					<Check
						checked={false}
						text="行选择"
						ref={(ck) => {
							ck.addEventListener('click', () => {
								if (ck.checked) {
									tb.setActivable(true);
								} else {
									tb.setActivable(false);
								}
							});
						}}
					/>
					行选择
				</label>
			</div>
			<Table
				section={{ key: 'section' }}
				ref={(t) => {
					tb = t;
					// addColumn();
					// addData();
				}}
				onRowClick={(detail) => {
					console.log(detail);
				}}
			/>
		</>
	);
}
